<template>
  <div>
    <!-- 陪玩注册列表 -->
    <el-table :data="playmateList" height="550" border style="width: 100%">
        <el-table-column 
            :label="header" 
            v-for="header in tableHeader" :key="header" 
            :prop="getPropName(header)"
            width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.registerApplicationStatus)">
              {{ getStatusText(scope.row.registerApplicationStatus) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button 
              size="mini" 
              type="success" 
              @click="handleReview(scope.row, 1)"
              :disabled="scope.row.registerApplicationStatus !== 0"
            >
              通过
            </el-button>
            <el-button 
              size="mini" 
              type="danger" 
              @click="handleReview(scope.row, 2)"
              :disabled="scope.row.registerApplicationStatus !== 0"
            >
              驳回
            </el-button>
          </template>
        </el-table-column>
    </el-table>

        <!-- 审核对话框 -->
    <el-dialog title="审核陪玩" :visible.sync="reviewDialogVisible" width="400px">
      <el-form label-width="80px">
        <el-form-item label="备注:">
          <el-input 
            type="textarea" 
            :rows="3" 
            placeholder="请输入审核备注"
            v-model="reviewForm.note">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviewDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReview()">确认</el-button>
      </span>
    </el-dialog>

     <!-- 分页 -->
    <div class="block">
        <el-pagination
            @size-change="changePageSize"               
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-sizes="[1, 3, 4, 5,7,9]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
    </div>    
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableHeader:['ID','电话', '昵称', '邮箱', '自我介绍', '备注', '地址', '游戏类型', '游戏等级'], 
      playmateList:[],
      reviewDialogVisible: false,
      reviewForm: {
        registerId: null,
        customerId: 1, // 当前客服ID，需要根据实际情况设置
        status: 1,
        note: ''
      },
      count:0,        //总条数
      params:{
        pageNum:1,      //当前页
        pageSize:9,     //页容量
      },
    }
  },
  methods:{
    // 根据表头获取对应的属性名
    getPropName(header){
      const mapping = {
        'ID':'id',
        '电话': 'registerTelephone',
        '昵称': 'registerNickname',
        '邮箱': 'registerEmail',
        '自我介绍': 'registerDesc',
        '状态': 'registerApplicationStatus',
        '备注': 'registerNote',
        '地址': 'addressName',
        '游戏类型': 'gameTypeName',
        '游戏等级': 'gameLevelName',
      }
      return mapping[header];
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '审核中',
        1: '通过',
        2: '驳回'
      };
      return statusMap[status] || '未知';
    },
    // 获取状态标签类型
    getStatusType(status) {
      const typeMap = {
        0: 'warning',
        1: 'success',
        2: 'danger'
      };
      return typeMap[status] || 'info';
    },
    // 加载陪玩注册列表数据
    async loadPlaymateList() { 
      const requestData = {
          pageNum: this.params.pageNum,
          pageSize: this.params.pageSize,
          tenantId: 1 
        };  
      let resp = await this.customerServiceApi.queryRegisterInfo(requestData)
      if(resp.code == 200) {
        this.playmateList = resp.data.list;
        this.total = resp.data.total;
      }else{
        this.$message.error(resp.message);
      }
    },
    //改变页大小
    changePageSize(val) {
      this.params.pageSize = val;
      this.params.pageNum = 1;
      this.loadPlaymateList();
    },
    //change当前页
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.loadPlaymateList();
    },
    // 处理审核
    handleReview(row, status) {
      this.reviewForm.registerId = row.id;
      this.reviewForm.status = status;
      this.reviewForm.note = '';
      this.reviewDialogVisible = true;
    },
    // 提交审核
    async submitReview() {
      try {
        const requestData = {
          registerId: this.reviewForm.registerId,
          customerId: this.reviewForm.customerId,
          status: this.reviewForm.status,
          note: this.reviewForm.note
        };
        
        const response = await this.customerServiceApi.reviewPlaymate(requestData);
        if(response.code == 200) {
          this.$message.success('审核成功');
          this.reviewDialogVisible = false;
          this.loadPlaymateList(); // 重新加载列表
        } else {
          this.$message.error(response.message);
        }
      } catch (error) {
        console.error('审核失败:', error);
        this.$message.error('审核失败');
      }
    }
  },
  created(){
    this.loadPlaymateList();
  }
};
</script>
<style scoped>
.playmate-info-container {
  padding: 20px;
}
</style>